<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">待办</block></cu-custom>
		
		<view>
			<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
				<view class="input-view">
					<uni-icons type="search" size="22" color="#666666" />
					<input v-model="searchVal" confirm-type="search" class="input" type="text" :placeholder="placeholder" @confirm="search">
					<uni-icons :color="'#999999'" v-if="searchVal===''" class="icon-scan" type="scan" size="22" @click="scan" />
					<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-close" type="close" size="22" @click="clear" />
				</view>
			</uni-nav-bar>
			
			<uni-nav-bar :fixed="true" color="#333333" background-color="#4364F7" :border="false">
				<scroll-view scroll-x scroll-with-animation :scroll-left="scrollLeft" style="z-index: 9999;">
					<view class="tui-tabs-view tui-tabs-relative" style="height:80rpx;padding:0 30rpx;background:#FFFFFF;top:auto">
						<view v-for="(item, index) in tabbar" :key="index" class="tui-tabs-item" style="width:50%" @tap.stop="swichNav(index)">
							<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}"
							 :style="{color:currentTab==index?'#5677fc':'#666',fontSize:'28rpx',lineHeight:'28rpx',fontWeight:false && currentTab==index?'bold':'normal'}">{{item.name}}
								 <view class="cu-tag badge" style="right: -20px;" v-if="item.badge!=0">
									<block>{{item.badge>99?'99+':item.badge}}</block>
								 </view>
							</view>
						</view>
						<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:'68rpx',height:'6rpx',bottom:'0rpx',background:'#5677fc'}"></view>
					</view>
				</scroll-view>
			</uni-nav-bar>
			
				<swiper class="tab-content" :current="currentTab" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
					<swiper-item>
						<scroll-view scroll-y class="scoll-y">
							<goods-in-bill ref="goodsInBillRef" :currId="goodsInBillCurrId" @updateDatWHEnd="goodsInBillUpdateDatWHEnd" @goodsCurrIdClear="goodsCurrIdClear"></goods-in-bill>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y class="scoll-y">
							<goods-out-bill ref="goodsOutBillRef" :currId="goodsOutBillCurrId" @updateDatWHEnd="goodsOutBillUpdateDatWHEnd" @goodsCurrIdClear="goodsCurrIdClear"></goods-out-bill>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y class="scoll-y">
							<qty-chk ref="qtyChkRef" :currId="qtyChkCurrId" @goodsCurrIdClear="goodsCurrIdClear"></qty-chk>
						</scroll-view>
					</swiper-item>
					<!-- <swiper-item>
						<scroll-view scroll-y class="scoll-y">
							<goods-posi-chng-bill ref="goodsPosiChngBillRef" :currId="goodsPosiChngBillCurrId" @updateDatWHEnd="goodsPosiChngBillUpdateDatWHEnd" @goodsCurrIdClear="goodsCurrIdClear"></goods-posi-chng-bill>
						</scroll-view>
					</swiper-item> -->
				</swiper>
		</view>
		
		
		
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import goodsInBill from './goodsInBill/list'
	import goodsOutBill from './goodsOutBill/list'
	import goodsPosiChngBill from './goodsPosiChngBill/list'
	import qtyChk from './qtyChk/list'
	import md5 from '@/common/lib/md5.min.js'
	import { mapGetters } from 'vuex'
	
	export default {
		components: {
			uniIcons,
			uniNavBar,
			goodsInBill,
			goodsOutBill,
			qtyChk
		},
		computed: mapGetters(['user']),
		data() {
			return {
				bgColor: '#FFFFFF',
				tabbar: [{
					name: '入库',
					badge: 0
				}, {
					name: '出库',
					badge: 0
				}, {
					name: '盘点',
					badge: 0
				}
				// , {
				// 	name: '移库',
				// 	badge: 0
				// },
				],
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				placeholder: '单号/客户/批次号/车牌号',
				goodsInBillCurrId: "0",
				goodsOutBillCurrId: "0",
				goodsPosiChngBillCurrId: "0",
				qtyChkCurrId: "0"
			}
		},
		onLoad(options) {
			
			if(options.currentTab){
				this.currentTab = Number(options.currentTab)
			}			

			if(options.currId){
				this.searchVal = options.currId
				
				if (this.currentTab === 0) {
					this.goodsInBillCurrId = options.currId
					this.goodsOutBillCurrId = "0"
					this.goodsPosiChngBillCurrId = "0"
					this.qtyChkCurrId = "0"
				} else if (this.currentTab === 1) {
					this.goodsInBillCurrId = "0"
					this.goodsOutBillCurrId = options.currId
					this.goodsPosiChngBillCurrId = "0"
					this.qtyChkCurrId = "0"
				} else {
					this.goodsInBillCurrId = "0"
					this.goodsOutBillCurrId = "0"
					this.goodsPosiChngBillCurrId = "0"
					this.qtyChkCurrId = options.currId
				}
				// else {
				// 	this.goodsInBillCurrId = "0"
				// 	this.goodsOutBillCurrId = "0"
				// 	this.goodsPosiChngBillCurrId = options.currId
				// }
								
			}
			
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight-90
					this.winWidth = res.windowWidth
					this.checkCor()
				}
			})
			
			this.$minApi.getGoodsInOutChantToDo().then(res => {
				const data = res
				if (data) {
					this.tabbar[0].badge = data.goodsInCnt
					this.tabbar[1].badge = data.goodsOutCnt
					this.tabbar[2].badge = data.qtyChkCnt
					// this.tabbar[2].badge = data.goodsPosiChngCnt
				}
			}).catch(err => {
				console.log(err)
			})
			
		},
		onShow(e) {
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
				this.search()
			}
		},
		methods: {
			// swichNav(e) {
			// 	this.currentTab = e.index
			// },
			// 滚动切换标签样式
			switchTab(e) {

				this.currentTab = e.detail.current
				this.checkCor()
				if (this.currentTab === 0) {
					this.placeholder = '单号/客户/批次号/车牌号'
				} else if (this.currentTab === 1) {
					this.placeholder = '单号/客户/提货单号/车牌号'
				} else {
					this.placeholder = '单号'
				}
				
			},
			// 判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCorSwitchTab() {
				if (this.currentTab > 3) {
					// 这里距离按实际计算
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			checkCor() {
				let tabsNum = this.tabbar.length
				let padding = this.winWidth / 750 * 30
				let width = this.winWidth - padding * 2
				let left = (width / tabsNum - (this.winWidth / 750 * 68)) / 2 + padding
				let scrollLeft = left
				if (this.currentTab > 0) {
					scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab
				}
				this.scrollLeft = scrollLeft
			},
			// 点击标题切换当前页时改变样式
			swichNav(index) {
				let item = this.tabbar[index]
				if (item && item.disabled) return
				if (this.currentTab == index) {
					return false
				} else {
					this.currentTab = Number(index)
				}
			},
			search() {
				if (this.currentTab == 0) {
					this.$refs.goodsInBillRef.queryByName(this.searchVal)
				} else if (this.currentTab == 1) {
					this.$refs.goodsOutBillRef.queryByName(this.searchVal)
				}
				else {
					this.$refs.qtyChkRef.queryByName(this.searchVal)
				}
				// else {
				// 	this.$refs.goodsPosiChngBillRef.queryByName(this.searchVal)
				// }
			},
			scan() {
				// 允许从相机和相册扫码
				const _this = this
				uni.scanCode({
				    success: function (res) {
				        // console.log('条码类型：' + res.scanType);
				        // console.log('条码内容：' + res.result);
						_this.searchVal = res.result
						_this.search()
				    }
				})
			},
			clear() {
				this.searchVal = ''
				this.search()
			},
			goodsInBillUpdateDatWHEnd() {
				
				const inToDoListParams = {
					status: '预录完成',
					tallyClerk: '',
					vehicleNum: ''
				}
				this.$minApi.getGoodsInBillTodoList(inToDoListParams).then(res => {
					const data = res
					if (data) {
						this.tabbar[0].badge = data.length
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goodsOutBillUpdateDatWHEnd() {
				const outToDoListParams = {
					status: '出库提交',
					tallyClerk: '',
					vehicleNum: ''
				}
				this.$minApi.getGoodsOutBillTodoList(outToDoListParams).then(res => {
					const data = res
					if (data) {
						this.tabbar[1].badge = data.length
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			goodsPosiChngBillUpdateDatWHEnd() {
				const chngToDoListParams = {
					status: '已提交',
					tallyClerk: ''
				}
				this.$minApi.getGoodsPosiChngBillTodoList(chngToDoListParams).then(res => {
					const data = res
					if (data) {
						this.tabbar[2].badge = data.length
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			backedPage() {
				uni.switchTab({
					url: '/pages/main/index'
				})
			},
			goodsCurrIdClear(){
				this.goodsInBillCurrId = "0"
				this.goodsOutBillCurrId = "0"
				this.goodsPosiChngBillCurrId = "0"
				this.qtyChkCurrId = "0"
			}
		}
	}
</script>

<style>
	/* tab start */
	.tui-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	}

	.tui-tabs-relative {
		position: relative;
	}

	.tui-tabs-fixed {
		position: fixed;
		left: 0;
	}

	.tui-tabs-fixed::before,
	.tui-tabs-relative::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-unlined::before {
		border-bottom: 0 !important
	}

	.tui-tabs-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tabs-disabled {
		opacity: .6;
	}

	.tui-tabs-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
	}

	.tui-tabs-active {
		transition: all 0.15s ease-in-out;
	}

	.tui-tabs-slider {
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		transition: all 0.15s ease-in-out;
		z-index: 0;
	}
	
	/* tab end */
</style>
